<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../nav.css">
    <link rel="stylesheet" href="./animal.css">
</head>
<body>
    <nav>
        <div class="main_nav">
            <a href="../index.html">
                <p>环境</p>
            </a>
            <a href="./animal.html" style="color: gray;">
                <p>动物</p>
            </a>
            <a href="./meature.html">
                <p>措施</p>
            </a>
         
        </div>
    </nav>
    <article>
        <div class="first">
            <img src="../image/animal1.webp" alt="">
            <div>
                <h1>熊猫</h1>
                <p>大熊猫（学名：Ailuropoda melanoleuca）属于熊科、大熊猫属哺乳动物，是中国特有种。仅有两个亚种，四川亚种和秦岭亚种。雌性比雄性小10-20％。头躯长1.2-1.8米，尾长10-12厘米。体重80-120千克，最重可达180千克。体型肥硕似熊、丰腴富态。头圆、体肥、尾短。体色为黑白两色，眼圈、耳壳、肩和四肢为深黑色外，其余部分均为乳白色。脸颊圆，有很大的“黑眼圈”，标志性的内八字的行走方式，也有解剖刀般锋利的爪子。大熊猫皮肤厚，最厚处可达10毫米。</p>
            </div>
        </div>
        <hr style="margin-top: 30px;margin-bottom: 20px;">
        <h1 style="width: 75%;margin: auto;">一、哺乳动物</h1>
        <div class="second">
            <div>
                <img src="../image/lion.webp" alt="">
                <p>狮子是极具个性的动物，它们散发着独特的魅力和威严的气息。</p>
            </div>
           
            <div>
                <img src="../image/elephant.webp" alt="">
                <p>大象拥有厚重的身躯和从容的气质，它们以稳健的步伐前行，不畏任何风雨。</p>
            </div>
            <div>
                <img src="../image/giraffe.webp" alt="">
                <p>长颈鹿拥有高挑修长的身躯，颈部如同优雅的旋律，在自然环境中形成一道美丽的风景线。</p>
            </div>
        </div>
        <hr style="margin-top: 30px;margin-bottom: 20px;">
        <h1 style="width: 75%;margin: auto;">二、常见动物分类</h1>
        <div class="third">
            <div>
                <div class="third_head">
                    <img src="../image/哺乳icon.webp" alt="">
                    <p>哺乳动物</p>
                    <p class="arrow">&gt;</p>
                </div>
                <div class="third_body">
                    <p>狮子</p>
                    <p>老虎</p>
                    <p>大象</p>
                    <p>斑马</p>
                    <p>猎豹</p>
                </div>
            </div>
            <div>
                <div class="third_head">
                    <img src="../image/两栖icon.webp" alt="">
                    <p>两栖动物</p>
                    <p class="arrow">&gt;</p>
                </div>
                <div class="third_body">
                    <p>鳄鱼</p>
                    <p>青蛙</p>
                    <p>大鳄龟</p>
                    <p>美洲虎</p>
                    <p>娃娃鱼</p>
                </div>
            </div>
            <div>
                <div class="third_head">
                    <img src="../image/鸟类icon.webp" alt="">
                    <p>鸟类动物</p>
                    <p class="arrow">&gt;</p>
                </div>
                <div class="third_body">
                    <p>鸡</p>
                    <p>鸭</p>
                    <p>孔雀</p>
                    <p>杜鹃</p>
                    <p>乌鸦</p>
                </div>
            </div>
            <div>
                <div class="third_head">
                    <img src="../image/鱼类icon.webp" alt="">
                    <p>鱼类动物</p>
                    <p class="arrow">&gt;</p>
                </div>
                <div class="third_body">
                   
                    <p>鳄鱼</p>
                    <p>鲨鱼</p>
                    <p>草鱼</p>
                    <p>金鱼</p>
                    <p>泥鳅</p>
                </div>
            </div>
            <div>
                <div class="third_head">
                    <img src="../image/爬行icon.webp" alt="">
                    <p>爬行动物</p>
                    <p class="arrow">&gt;</p>
                </div>
                <div class="third_body">
                    <p>蛇</p>
                    <p>鳄鱼</p>
                    <p>海龟</p>
                    <p>壁虎</p>
                    <p>中华草龟</p>
                </div>
            </div>
          
            
        </div>
    </article>
    <footer>
        <div class="logo">
            <img src="../image/animal_logo.jpg" alt="">
        </div>
    </footer>
    <script src="./animal.js"></script>
</body>
</html>